<%@ page import="util.Decode" %>
<%@ page import="server.SettingServer" %>
<%@ page import="net.sf.json.JSONArray" %>
<%@ page import="net.sf.json.JSONObject" %>
<%@ page import="server.GameServer" %>
<%@ page import="server.FileServer" %>
<%@ page import="java.util.LinkedHashMap" %>
<%@ page import="config.ApplicationConfig" %>
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    LinkedHashMap<String, String> pageConfig = ApplicationConfig.readConfig("page.json");
    request.setCharacterEncoding(pageConfig.get("encode"));
    response.setCharacterEncoding(pageConfig.get("encode"));
    Object user = session.getAttribute("user");
%>
<html>
<head>
    <title>比 赛</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/page.css">
    <link rel="stylesheet" href="css/game.css">
    <link rel="stylesheet" href="css/timer.css">
</head>
<body>
<nav class="navbar navbar-inverse head" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#navbar">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <%
                SettingServer settingServer = new SettingServer();
                settingServer.open();
                JSONObject logo = settingServer.readSettingObject("logo");
                if (logo.getString("logo").equals("")) {
            %>
            <img class="navbar-brand" src="image/logo.png">
            <%
            } else {
                FileServer fileServer = new FileServer();
                fileServer.open();
            %>
            <img class="navbar-brand" src="<%=fileServer.getImage(logo.getString("logo"))%>">
            <%
                    fileServer.close();
                }
            %>
            <a class="navbar-brand" href="#"><%=logo.getString("name")%>
            </a>
        </div>
        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
                <li>
                    <a href="index.jsp">首 页</a>
                </li>
                <li class="active">
                    <a href="game.jsp">比 赛</a>
                </li>
                <li>
                    <a href="rank.jsp">排 名</a>
                </li>
                <li>
                    <a href="about.jsp">通 知</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right text-center">
                <%
                    if (user == null || user.toString().equals("")) {
                %>
                <li>
                    <a href="#" class="glyphicon glyphicon-log-in" data-toggle="modal" data-target="#login">&nbsp;登录</a>
                    <div class="modal fade" id="login" role="dialog" aria-hidden="true" aria-labelledby="loginLabel">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                            onclick="input_clear(document.getElementById('login_form'))">&times;
                                    </button>
                                    <h4 class="modal-title" id="loginLabel">登 录</h4>
                                </div>
                                <div class="modal-body">
                                    <form id="login_form" action="login" method="post">
                                        <input type="text" name="return" hidden="hidden" value="game.jsp">
                                        用户名:&nbsp;&nbsp;<input type="text" name="username">
                                        <br>
                                        <br>
                                        密&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;<input type="password" name="password">
                                        <br>
                                        <br>
                                        验证码:&nbsp;&nbsp;<input type="text" name="ver_code" class="ver_text">
                                        <img src="ver_code" class="ver_img" id="login_ver_code_img"
                                             onclick="reload_code(document.getElementById('login_ver_code_img'))">
                                        <br>
                                        <br>
                                        <font color="red">验证码不区分大小写，点击图片刷新</font>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-danger"
                                            onclick="form_clear(document.getElementById('login_form'))">重 填
                                    </button>
                                    <button type="button" class="btn btn-primary"
                                            onclick="form_submit(document.getElementById('login_form'))">登 录
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#" class="glyphicon glyphicon-user" data-toggle="modal"
                       data-target="#register">&nbsp;注册</a>
                    <div class="modal fade" id="register" role="dialog" aria-hidden="true"
                         aria-labelledby="registerLabel">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                            onclick="input_clear(document.getElementById('register_form'))">&times;
                                    </button>
                                    <h4 class="modal-title" id="registerLabel">注 册</h4>
                                </div>
                                <div class="modal-body">
                                    <form id="register_form" action="register" method="post">
                                        <input type="text" name="return" hidden="hidden" value="game.jsp">
                                        用&nbsp;&nbsp;户&nbsp;&nbsp;名:&nbsp;&nbsp;<input type="text" name="username">
                                        <br>
                                        <br>
                                        密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;<input type="password"
                                                                                                        name="password">
                                        <br>
                                        <br>
                                        再次输入:&nbsp;&nbsp;<input type="password" name="again">
                                        <br>
                                        <br>
                                        验&nbsp;&nbsp;证&nbsp;&nbsp;码:&nbsp;&nbsp;<input type="text" name="ver_code"
                                                                                       class="ver_text">
                                        <img src="ver_code" class="ver_img" id="register_ver_code_img"
                                             onclick="reload_code(document.getElementById('register_ver_code_img'))">
                                        <br>
                                        <br>
                                        <font color="red">更多个人信息请在注册成功后及时进行更新</font>
                                        <br>
                                        <br>
                                        <font color="red">验证码不区分大小写，点击图片刷新</font>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-danger"
                                            onclick="input_clear(document.getElementById('register_form'))">重 填
                                    </button>
                                    <button type="button" class="btn btn-primary"
                                            onclick="form_submit(document.getElementById('register_form'))">注 册
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <%
                } else {
                %>
                <li>
                    <a href="mine" class="glyphicon glyphicon-user">&nbsp;<%=user%>
                    </a>
                </li>
                <li>
                    <a href="#" class="glyphicon glyphicon-log-out" data-toggle="modal"
                       data-target="#logout">&nbsp;退出</a>
                    <div class="modal fade" id="logout" role="dialog" aria-hidden="true"
                         aria-labelledby="logoutLabel">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                            onclick="input_clear(document.getElementById('logout_form'))">&times;
                                    </button>
                                    <h4 class="modal-title" id="logoutLabel">退 出 登 录</h4>
                                </div>
                                <div class="modal-body">
                                    确定要退出吗？
                                    <form id="logout_form" action="logout" method="post">
                                        <input type="text" name="username" hidden="hidden" value="<%=user%>">
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary"
                                            onclick="form_submit(document.getElementById('logout_form'))">&nbsp;退出
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <%
                    }
                %>
            </ul>
        </div>
    </div>
</nav>

<%
    GameServer gameServer = new GameServer();
    gameServer.open();
    JSONObject gameInfo = gameServer.getGameInformation();
%>
<div class="container text-center main">

    <div class="panel panel-info col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="panel-heading"><h2 class="panel-title"><%=gameInfo.getString("name")%>
        </h2></div>
        <div class="panel-body">
            <br>
            <br>
            <row>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <%
                        if (gameInfo.getString("logo").equals("")) {
                    %>
                    <img src="image/game_logo.png" width=210 height=210 class="img-circle"
                         style="border: darkorange 10px solid">
                    <%
                    } else {
                        FileServer fileServer = new FileServer();
                        fileServer.open();
                    %>
                    <img src="<%=fileServer.getImage(gameInfo.getString("logo"))%>" width=210 height=210
                         class="img-circle" style="border: darkorange 10px solid">
                    <%
                            fileServer.close();
                        }
                    %>
                </div>
                <br>
                <br>
            </row>
            <row>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <row>
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <h3>现在时间</h3>
                            <div id="now_timer">
                                <div class="days">
                                    <div class="numbers">0000</div>
                                    <div class="title">年</div>
                                </div>
                                <div class="hours">
                                    <div class="numbers">00</div>
                                    <div class="title">月</div>
                                </div>
                                <div class="minutes">
                                    <div class="numbers">00</div>
                                    <div class="title">日</div>
                                </div>
                                <div class="seconds">
                                    <div class="numbers">00</div>
                                    <div class="title">时</div>
                                </div>
                                <div class="seconds">
                                    <div class="numbers">00</div>
                                    <div class="title">分</div>
                                </div>
                                <div class="seconds">
                                    <div class="numbers">00</div>
                                    <div class="title">秒</div>
                                </div>
                            </div>
                        </div>
                        <br>
                        <br>
                        <br>
                    </row>
                    <row>
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <h3 id="countdown_timer_title">倒计时</h3>
                            <div id="countdown_timer">
                                <div class="days">
                                    <div class="numbers">00</div>
                                    <div class="title">天</div>
                                </div>
                                <div class="hours">
                                    <div class="numbers">00</div>
                                    <div class="title">时</div>
                                </div>
                                <div class="minutes">
                                    <div class="numbers">00</div>
                                    <div class="title">分</div>
                                </div>
                                <div class="seconds">
                                    <div class="numbers">00</div>
                                    <div class="title">秒</div>
                                </div>
                            </div>
                        </div>
                        <br>
                        <br>
                        <br>
                        <br>
                    </row>
                </div>
            </row>
            <table class="table table-striped text-center word_break">
                <tr>
                    <td><b>主办方</b></td>
                    <td><b>开始时间</b></td>
                    <td><b>结束时间</b></td>
                    <td><b>距离结束提醒时间</b></td>
                    <td><b>罚时</b></td>
                    <td><b>参赛人数</b></td>
                </tr>
                <tr>
                    <td><%=gameInfo.getString("sponsor")%>
                    </td>
                    <td><%=gameInfo.getString("start")%>
                    </td>
                    <td><%=gameInfo.getString("stop")%>
                    </td>
                    <td><%=gameInfo.getString("time_is_up")%>
                    </td>
                    <td><%=gameInfo.getString("punish")%>
                    </td>
                    <td><%=gameInfo.getString("playerCount")%>
                    </td>
                </tr>
            </table>
            <br>
            <br>
        </div>
        <div class="panel-footer">
            <%
                if (gameInfo.getInt("state") == 0) {
            %>
            <a class="btn btn-default" disabled="true">
                比赛未开始
            </a>
            <%
            } else if (gameInfo.getInt("state") == 1) {
            %>
            <a class="btn btn-primary" href="subject.jsp">
                进入比赛
            </a>
            <%
            } else {
            %>
            <a class="btn btn-default" disabled="true">
                比赛已结束
            </a>
            <%
                }
            %>
        </div>
    </div>
</div>
<br>

<%
    Decode decode = new Decode();
    JSONArray foot = settingServer.readSettingArray("foot");
    JSONObject foot0 = foot.getJSONObject(0);
    JSONObject foot1 = foot.getJSONObject(1);
    JSONObject foot2 = foot.getJSONObject(2);
%>
<div class="foot">
    <row>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <br>
            <div class="foot_item_title">
                <p><%=decode.utf8Decode(foot0.getString("title"))%>
                </p>
            </div>
            <hr class="foot_split">
            <div class="foot_item">
                <p><%=decode.utf8Decode(foot0.getString("line0"))%>
                </p>
                <p><%=decode.utf8Decode(foot0.getString("line1"))%>
                </p>
                <p><%=decode.utf8Decode(foot0.getString("line2"))%>
                </p>
            </div>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <br>
            <div class="foot_item_title">
                <p><%=decode.utf8Decode(foot1.getString("title"))%>
                </p>
            </div>
            <hr class="foot_split">
            <div class="foot_item">
                <p><%=decode.utf8Decode(foot1.getString("line0"))%>
                </p>
                <p><%=decode.utf8Decode(foot1.getString("line1"))%>
                </p>
                <p><%=decode.utf8Decode(foot1.getString("line2"))%>
                </p>
            </div>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <br>
            <div class="foot_item_title">
                <p><%=decode.utf8Decode(foot2.getString("title"))%>
                </p>
            </div>
            <hr class="foot_split">
            <div class="foot_item">
                <p><%=decode.utf8Decode(foot2.getString("line0"))%>
                </p>
                <p><%=decode.utf8Decode(foot2.getString("line1"))%>
                </p>
                <p><%=decode.utf8Decode(foot2.getString("line2"))%>
                </p>
            </div>
        </div>
    </row>
</div>
<%
    settingServer.close();
%>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/page.js"></script>
<script src="js/ver_code.js"></script>
<script src="js/game.js"></script>
<script>
    <%
    String startTime = gameServer.getGameInformation().getString("start");
    String stopTime = gameServer.getGameInformation().getString("stop");
    gameServer.close();
    %>
    var startTime = new Date('<%=startTime%>').getTime();
    var stopTime = new Date('<%=stopTime%>').getTime();

    let timer = setInterval(function () {

        let now = new Date();
        let today = now.getTime();

        let diff = 0;
        if (today < startTime) {
            document.getElementById("countdown_timer_title").innerHTML = '距离比赛开始剩余';
            diff = startTime - today;
        } else {
            document.getElementById("countdown_timer_title").innerHTML = '距离比赛结束剩余';
            diff = stopTime - today;
        }

        let nowYear = now.getFullYear();
        let nowMonth = now.getMonth() + 1;
        let nowDay = now.getDate();
        let nowHour = now.getHours();
        let nowMinute = now.getMinutes();
        let nowSecond = now.getSeconds();

        if (nowMonth < 10) {
            nowMonth = '0' + nowMonth;
        }
        if (nowDay < 10) {
            nowDay = '0' + nowDay;
        }
        if (nowHour < 10) {
            nowHour = '0' + nowHour;
        }
        if (nowMinute < 10) {
            nowMinute = '0' + nowMinute;
        }
        if (nowSecond < 10) {
            nowSecond = '0' + nowSecond;
        }

        let days = Math.floor(diff / (1000 * 60 * 60 * 24));
        let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        let seconds = Math.floor((diff % (1000 * 60)) / 1000);

        if (days < 0) {
            days = '00';
        } else if (days < 10) {
            days = '0' + days;
        }
        if (hours < 0) {
            hours = '00';
        } else if (hours < 10) {
            hours = '0' + hours;
        }
        if (minutes < 0) {
            minutes = '00';
        } else if (minutes < 10) {
            minutes = '0' + minutes;
        }
        if (seconds < 0) {
            seconds = '00';
        } else if (seconds < 10) {
            seconds = '0' + seconds
        }

        document.getElementById("now_timer").innerHTML =
            "<div class=\"days\"> \
      <div class=\"numbers\">" + nowYear + "</div><div class=\"title\">年</div></div> \
<div class=\"hours\"> \
  <div class=\"numbers\">" + nowMonth + "</div><div class=\"title\">月</div></div> \
<div class=\"minutes\"> \
  <div class=\"numbers\">" + nowDay + "</div><div class=\"title\">日</div></div> \
<div class=\"seconds\"> \
  <div class=\"numbers\">" + nowHour + "</div><div class=\"title\">时</div></div> \
<div class=\"seconds\"> \
  <div class=\"numbers\">" + nowMinute + "</div><div class=\"title\">分</div></div> \
<div class=\"seconds\"> \
  <div class=\"numbers\">" + nowSecond + "</div><div class=\"title\">秒</div></div> ";

        document.getElementById("countdown_timer").innerHTML =
            "<div class=\"days\"> \
      <div class=\"numbers\">" + days + "</div><div class=\"title\">天</div></div> \
<div class=\"hours\"> \
  <div class=\"numbers\">" + hours + "</div><div class=\"title\">时</div></div> \
<div class=\"minutes\"> \
  <div class=\"numbers\">" + minutes + "</div><div class=\"title\">分</div></div> \
<div class=\"seconds\"> \
  <div class=\"numbers\">" + seconds + "</div><div class=\"title\">秒</div></div>";

    }, 500);
</script>
</html>